/*!
 * # 模块 JS:
 *  Profile - 用户资料
 * 
 * # 描述:
 *  向每一位用户提供用户资料修改、密码设置、头像更改等功能。
 * 
 * Copyright (c), 上海沃恩信息科技有限公司.
 * All rights reserved.
 * Licensed under BSD (https://www.pittypat.work/bsd.html).
 */

/*
 * @param {Object} $    jQuery 命名空间。
 * @param {Object} $$   pittypat 命名空间。
 * @param {Object} _mod 模块 Apps (应用与功能) 的命名空间。
 * 
 * 使用 pittypat.namespace('...') 以确保 _mod 命名空间是存在的。
 * 
 * 更多说明请参见：
 * https://www.pittypat.work/com/waln/pittypat/coding/help/index.html#js。
 */
(function ($, $$, _mod) {
    'use strict';

    /*
     * 为登录用户注册一个处理函数。
     * 由于没有为匿名用户注册处理函数，那么当发现用户尚未登录时，则会默认跳转到首页（登录页）。
     * 
     * 如果需要为匿名用户添加处理逻辑，应该使用如下格式的代码：
     * $$({
     *     authorized: function (_) {
     *         ...
     *     },
     *     anonymous: function (_) {
     *         // 跳转到自定义的登录页面
     *         window.location = '../../../../login.html';
     *     }
     * });
     * 
     * 如果需要自定义登录页面，则可能还需要添加 init 等处理函数。详细帮助请参见：
     * https://www.pittypat.work/com/waln/pittypat/ref/help/pittypat.js.html#pittypat。
     *
     * 参数 _ 的定义如下：
     * {
     *    user:  {Object},  // (只读)当前用户的用户信息
     *    app:   {Object},  // (只读)当前应用的命名空间，如果无法定位，则为 null
     *    mod:   {Object},  // (只读)当前模块的命名空间，如果无法定位，则为 null
     *    init:  {Boolean}, // (只读)是否正在初始化页面
     *    first: {Boolean}, // (只读)是否首次执行 authorized
     *    data:  {any}      // (读写)前述的 data 数据，或 data 函数返回的结果
     * }
     */
    $$(function (_) {
        var
            // 模块 UI 命名空间
            _ui = _mod.ui = _mod.ui || {},
            // 模块 API 命名空间
            _api = _mod.api,
            // body > main
            $main = $('.pt-main');

        function _set() {
            $('#user-name').text(_.user.name);
            $('#user-login-name').text(_.user.loginName);
            $('#user-no').text(_.user.no);
            $('#user-mobile').text(_.user.mobile);
            $('#user-email').text(_.user.email);
            $('#user-reg-time').text($$.util.fmt.minute(_.user.createTime));
            $('#user-login-time').text($$.util.fmt.minute(_.user.loginTime));
        }

        function _setFace() {
            if (_.user.faceUrl) {
                var url = $$.web.url(_.user.faceUrl);
                $('<img alt="" />')
                    .attr('src', $$.web.url(_.user.faceUrl))
                    .appendTo($('main header').empty())
                    .on('error', function () {
                        this.parentElement.innerHTML = '<i class="material-icons">account_circle</i>';
                    });

                $('#set-face-thumb').attr('src', url);
            } else {
                $('<i class="material-icons">account_circle</i>').appendTo($('main header').empty());
                $('#set-face-thumb').attr('src', '');
            }
        }

        if (_.init) {
            var snackbar = new mdc.snackbar.MDCSnackbar(document.getElementById('snackbar')),
                progress = null,
                $file = $('#set-face-file');

            // 为 set 添加事件
            _api.set
                // 获取参数
                .on('args', function (e) {
                    e.args = {
                        name: $('#set-name').val(),
                        loginName: $('#set-login-name').val(),
                        mobile: $('#set-mobile').val(),
                        email: $('#set-email').val()
                    };
                })

                // 如果前后位置没有发生变化，则不需要提交
                .on('before', function (e) {
                    e.cancel = (
                        e.args.name == _.user.name &&
                        e.args.loginName == _.user.loginName &&
                        e.args.mobile == _.user.mobile &&
                        e.args.email == _.user.email);
                })

                // 当设置成功后关闭对话框，刷新导航和当前列表
                .on('success', function (e) {
                    _.user.name = e.args.name;
                    _.user.loginName = e.args.loginName;
                    _.user.mobile = e.args.mobile;
                    _.user.email = e.args.email;

                    // 更新用户资料
                    _set();

                    // 导航中的用户名称
                    $('.pt-nav-userbar b').text(_.user.name);
                });

            // 为 setPassword 注册事件
            _api.setPassword
                // 获取参数
                .on('args', function (e) {
                    e.args = {
                        oldPassword: $('#set-password-old-password').val(),
                        newPassword: $('#set-password-new-password').val(),
                        confirmPassword: $('#set-password-confirm-password').val()
                    };
                })

                // 当设置成功后关闭对话框，刷新导航和当前列表
                .on('success', function (e) {
                    $('#set-password-old-password').val('');
                    $('#set-password-new-password').val('');
                    $('#set-password-confirm-password').val('');

                    snackbar.show({
                        message: '密码已更改！',
                        actionHandler: $.noop,
                        actionText: '关闭'
                    });
                });

            // 为 setFace 注册事件
            _api.setFace
                // 获取文件列表
                .on('files', function (e) {
                    // 只上传第一个文件
                    e.files = $file[0].files;
                })

                // 上传进度
                .on('progress', function (e) {
                    progress.progress = e.percent / 100;
                })

                // POST 操作的 data
                .on('data', function (e) {
                    var url = e.files[0].url;
                    e.data = {
                        // 保存时添加一个根路径前缀
                        faceUrl: url.startsWith('~') ? url : ('~' + url)
                    };
                })

                // 当设置成功后关闭对话框，刷新导航和当前列表
                .on('success', function (e) {
                    progress.progress = 1;
                    _.user.faceUrl = e.data.faceUrl;

                    // 更新导航中的用户头像
                    $('.pt-nav-userbar>a')
                        .html('<img src="' + $$.web.url(_.user.faceUrl) + '" alt="" /><b></b>')
                        .children('img').one('error', function () {
                            $('.pt-nav-userbar>a').html('<i class="material-icons">account_circle</i><b></b>');
                            // 用户名称
                            $('.pt-nav-userbar>a>b').text(_.user.name);
                        });

                    $('.pt-nav-userbar>a>b').text(_.user.name);

                    // 更新头像
                    _setFace();
                });

            // 设置用户资料
            $('#set-dialog')
                .on('opening', function () {
                    $('#set-name').val(_.user.name);
                    $('#set-login-name').val(_.user.loginName);
                    $('#set-mobile').val(_.user.mobile);
                    $('#set-email').val(_.user.email);
                })
                .on('ok', function (event) {
                    $$.ui.msg = '...';
                    _api.set
                        .one('load', function () {
                            $$.ui.msg = '';
                            // 关闭对话框
                            event.done = true;
                        })();
                });

            // 设置登录密码
            $('#set-password-dialog')
                .on('ok', function (event) {
                    $$.ui.msg = '...';
                    _api.setPassword
                        .one('load', function () {
                            $$.ui.msg = '';
                            // 关闭对话框
                            event.done = true;
                        })();
                });

            // 设置头像
            $('#set-face-dialog')
                .on('opening', function () {
                    if (!progress) {
                        progress = mdc.linearProgress.MDCLinearProgress.attachTo(document.getElementById('set-face-progress'));
                    }

                    progress.progress = 0;
                })
                .on('ok', function (event) {
                    _api.setFace
                        .one('load', function () {
                            // 关闭对话框
                            event.done = true;
                        })();
                });

            // 选择文件
            $('#set-face-select-file').on('click', function () {
                $file.trigger('click');
            });

            // 预览文件
            $file.on('change', function () {
                var files = $file[0].files,
                    $btnUpload = $('#set-face-dialog button[data-ok]').prop('disabled', true);
                if (!files.length) {
                    $$.ui.msg = "请选择一张图片。";
                    return;
                }

                if (!/^image\//.test(files[0].type)) {
                    $$.ui.msg = "文件不是有效图片。";
                    return;
                }

                // 缩略图
                (function (file) {
                    var reader = new FileReader();
                    reader.onload = (function (img) {
                        return function (e) {
                            img.src = e.target.result;
                        };
                    })($("#set-face-thumb")[0]);

                    reader.readAsDataURL(file);
                })(files[0]);

                // 上传按钮状态
                (function (file) {
                    // 文件不能超过 500KB
                    if (file.size > 512000) {
                        $$.ui.msg = "图片文件超过 500KB (" + (file.size / 1024).toFixed(2) + "KB)。";
                    } else {
                        $$.ui.msg = '';
                        $btnUpload.prop('disabled', false);
                    }
                })(files[0]);
            });

            // 初始化 mdc
            $main.mdcInit();
        }

        // 更新头像
        _setFace();

        // 更新用户资料
        _set();
    });
})(jQuery, pittypat, pittypat.namespace('waln.authority.profile'));
